<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      @darg-sort="sortTable"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="">
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增商品</el-button>
        <!-- <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加商品</el-button>
        <el-button v-auth="'export'" type="primary" :icon="Download" plain @click="downloadFile">导出用户数据</el-button>
        <el-button type="primary" plain @click="toDetail">To 子集详情页面</el-button>
        <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
          批量删除用户
        </el-button> -->
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <template #goodPrice="scope"> ￥{{ scope.row.Sku[0].price.toFixed(2) }} </template>
      <template #count="scope">
        {{
          scope.row.Sku.reduce((accumulator, current) => {
            return accumulator + current.quantity;
          }, 0)
        }}
      </template>
      <!-- usernameHeader -->
      <template #usernameHeader="scope">
        <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
          {{ scope.column.label }}
        </el-button>
      </template>
      <!-- createTime -->
      <template #createAt="scope">
        {{ dayjs(scope.row.createAt).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <!-- <el-button type="primary" link :icon="Refresh" @click="resetPass(scope.row)">重置密码</el-button> -->
        <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <GoodDrawer ref="drawerRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { Goods } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
// import { useDownload } from "@/hooks/useDownload";
// import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import GoodDrawer from "@/views/proTable/components/GoodDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
import { getList as getCate } from "@/api/modules/cate";
import { getList as getSupplier } from "@/api/modules/supplier";
import dayjs from "dayjs";

import {
  getGoodList,
  deleteGood,
  editGood,
  addGood
  // changeGoodStatus,
  // resetGoodPassWord
  // exportGoodInfo
  // BatchAddGood
} from "@/api/modules/goods";

// const router = useRouter();

// 跳转详情页
// const toDetail = () => {
//   router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`);
// };

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  console.log(data, "datra");
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getGoodList(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
// const { BUTTONS } = useAuthButtons();

// // 自定义渲染表头（使用tsx语法）
// const headerRender = (scope: HeaderRenderScope<Goods.ResGoodList>) => {
//   return (
//     <el-button type="primary" onClick={() => ElMessage.success("我是通过 tsx 语法渲染的表头")}>
//       {scope.column.label}
//     </el-button>
//   );
// };
onMounted(() => {
  getCateList();
  getSupplierList();
});
// 分类
const CateList: any = ref([]);
const getCateList = () => {
  let newParams = {
    pageNum: 1,
    pageSize: 100,
    name: ""
  };
  getCate(newParams).then(res => {
    if (res.code == 200) {
      CateList.value = res.data.list;
    }
  });
};
// 供应商
const SupplierList: any = ref([]);
const getSupplierList = () => {
  let newParams = {
    pageNum: 1,
    pageSize: 100,
    name: ""
  };
  getSupplier(newParams).then(res => {
    console.log(res, "getSupplierList");
    if (res.code == 200) {
      SupplierList.value = res.data.list;
    }
  });
};
// 表格配置项
const columns = reactive<ColumnProps<Goods.ResGoodList>[]>([
  { prop: "id", label: "商品id", width: 85 },
  {
    prop: "goodName",
    label: "商品名",
    search: { el: "input" }
  },
  {
    prop: "goodPrice",
    label: "价格"
  },
  {
    prop: "cateId",
    label: "分类",
    enum: CateList,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "name", value: "id" }
  },
  {
    prop: "supplierId",
    label: "单位",
    enum: SupplierList,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "name", value: "id" }
  },
  {
    prop: "goodCode",
    label: "商品编码"
  },
  { prop: "count", label: "库存" },
  // { prop: "address", label: "居住地址" },
  {
    prop: "createAt",
    label: "创建时间",
    width: 180
  },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
]);

// 表格拖拽排序
const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
  console.log(newIndex, oldIndex);
  console.log(proTable.value?.tableData);
  ElMessage.success("修改列表排序成功");
};

// 删除用户信息
const deleteAccount = async (params: Goods.ResGoodList) => {
  await useHandleData(deleteGood, { id: params.id }, `删除【${params.goodName}】商品`);
  proTable.value?.getTableList();
};

// 批量删除用户信息
// const batchDelete = async (id: string[]) => {
//   await useHandleData(deleteGood, { id }, "删除所选用户信息");
//   proTable.value?.clearSelection();
//   proTable.value?.getTableList();
// };

// 重置用户密码
// const resetPass = async (params: Goods.ResGoodList) => {
//   await useHandleData(resetGoodPassWord, { id: params.id }, `重置【${params.username}】用户密码`);
//   proTable.value?.getTableList();
// };

// // 切换用户状态
// const changeStatus = async (row: Goods.ResGoodList) => {
//   await useHandleData(changeGoodStatus, { id: row.id, status: row.status == 1 ? 0 : 1 }, `切换【${row.username}】用户状态`);
//   proTable.value?.getTableList();
// };

// 导出用户列表
// const downloadFile = async () => {
//   ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
//     useDownload(exportGoodInfo, "用户列表", proTable.value?.searchParam)
//   );
// };

// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
// const batchAdd = () => {
//   const params = {
//     title: "用户",
//     tempApi: exportGoodInfo,
//     importApi: BatchAddGood,
//     getTableList: proTable.value?.getTableList
//   };
//   dialogRef.value?.acceptParams(params);
// };

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof GoodDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Goods.ResGoodList> = {}) => {
  if (row.specialIds && typeof row.specialIds == "string") {
    row.specialIds = row.specialIds.split(",").map(Number);
  }
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addGood : title === "编辑" ? editGood : undefined,
    getTableList: proTable.value?.getTableList,
    cateList: CateList.value,
    SupplierList: SupplierList.value
  };
  drawerRef.value?.acceptParams(params);
};
</script>
